<template>
  <div class="container">
      <img src="../../assets/icons/pointsbg.png" alt="" class="pointsbg-img">
      <div class="text-center points-txt-area-wrap">
          <div class="points-txt-area">
              <div class="big-points-txt">
              {{sum.totalPoints}}
          </div>
          <div class="points-txt">
              积分
          </div>
          </div>          
      </div>
      <div class="p1 flex">
          <div class="flex-con">
              <div class="p1-num">
                  {{sum.expiredBonusThisYear}}
              </div>
              <div class="p1-desc">
                  {{thisyear}}年度到期积分
              </div>
          </div>
          <div class="separator"></div>
          <div class="flex-con">
                <div class="p1-num">
                  {{sum.totalPoints-sum.expiredBonusThisYear}}
              </div>
              <div class="p1-desc">
                  {{thisyear+1}}年底到期积分
              </div>
          </div>
      </div>
      <div class="hrgray">          
      </div>
      <div class="bg-white">
          <div class="category-p">
              <div class="flex">
                  <div class="category-blue-line">                      
                  </div>
                  <div class="flex-con">
                      积分明细 
                  </div>
              </div>
          </div>
          <div class="text-center fz28 txt999 p30" style="padding-top:1.3333rem;" v-if="list.length==0 && isloaded==true">
            没有相关记录~
          </div>
          <div class="category-title border-b" style="margin-top:0.45rem;" v-if="list.length>0">
              {{thisMonth}}月
          </div>
          <div class="p2 border-b" v-for="(item,index) in list" :key="index">
              <div class="flex">
                  <div class="flex-con">
                      <div class="p2-title">
                   {{item.txnDesc}}
              </div>
              <div class="p2-time">
                  {{item|timeFormat}}
              </div>
                  </div>
                  <div :class="item.bonusCdFlag=='d'?'add-points':'reduce-points'">
                      {{item.bonusCdFlag=='d'?'+'+item.txnBonus:'-'+item.txnBonus}}
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  filters: {
    timeFormat(item) {
      let txnDate = item.txnDate;
      let txnTime = item.txnTime;
      let parts = "";

      for (let i = 0; i < txnDate.length; i++) {
        parts += txnDate[i];
        if (i == 3 || (i > 3 && i % 2 == 1)) {
          if (i < txnDate.length - 1) {
            parts += "-";
          }
        }
      }
      parts += " ";
      for (let i = 0; i < txnTime.length; i++) {
        parts += txnTime[i];
        if (i % 2 == 1 && i < txnTime.length - 1) {
          parts += ":";
        }
      }
      return parts;
    }
  },
  data() {
    return {
      thisyear:new Date().getFullYear(),
      sum: {
        expiredBonusThisYear:0,
        totalPoints:0
      },
      isloaded: false,
      thisMonth: "",
      list: []
    };
  },
  created() {
    this.$get("/api/user/getPointsSum").then(data => {
      this.sum = data || {};
    });
    this.thisMonth = new Date().getMonth() + 1;
    this.showLoading();
    this.$get("/api/user/getUserPointsDetails")
      .then(data => {
        this.list = data;
        this.isloaded = true;
        this.hideLoading();
      })
      .catch(el => {
        this.hideLoading();
      });
  }
};
</script>

<style lang="scss" scoped>
.pointsbg-img {
  width: 100%;
}
.big-points-txt {
  font-size: 0.8rem;
  color: #007f00;
}
.points-txt-area-wrap {
  text-align: center;
  left: 0;
  right: 0;
  position: absolute;
  top: 1.68rem;
}
.points-txt-area {
  width: 3.1467rem;
  height: 3.1467rem;
  display: inline-block;
}
.points-txt {
  font-size: 0.4rem;
  color: #444444;
  padding-top: 0.2267rem;
}
.hrgray {
  height: 0.2667rem;
  background-color: #f6f6f6;
}
.category-p {
  padding-top: 0.4rem;
  padding-left: 0.4rem;
  font-size: 0.4rem;
  color: #007f00;
}
.category-title {
  font-size: 0.32rem;
  color: rgba(23, 64, 42, 0.5);
  padding-top: 0.4133rem;
  padding-bottom: 0.32rem;
  padding-left: 0.4rem;
}
.category-blue-line {
  width: 0.08rem;
  height: 0.6133rem;
  background-color: #007f00;
  margin-right: 0.2267rem;
}
.p1 {
  padding: 0.44rem 0;
  text-align: center;
  .p1-num {
    font-size: 0.48rem;
    color: #e30421;
  }
  .p1-desc {
    font-size: 0.32rem;
    color: #444444;
    padding-top: 0.2133rem;
  }
  .separator {
    width: 1px;
    height: 0.9733rem;
    background-color: #eee;
  }
}
.p2 {
  padding: 0.32rem 0.4rem;
  .p2-title {
    font-size: 0.3733rem;
    color: #222222;
  }
  .p2-time {
    color: #bbbbbb;
    font-size: 0.2933rem;
    padding-top: 0.2667rem;
  }
  .add-points {
    font-size: 0.48rem;
    color: #e30421;
  }
  .reduce-points {
    font-size: 0.48rem;
    color: #007f00;
  }
}
</style>

